<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<svg
			class="smiley"
			width="256"
			height="256"
			viewBox="0 0 256 256"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			xmlns:xlink="http://www.w3.org/1999/xlink"
		>
			<title>Smiling face</title>
			<desc>Smiley face drawn using SVG</desc>
			<style>
				.smiley {
					cursor: pointer;
				}
				.left-eyebrow {
					transform: rotate(80deg);
					transform-origin: 100px 82px;
					transition: all 0.5s linear;
				}
				.right-eyebrow {
					transform: rotate(100deg);
					transform-origin: 156px 82px;
					transition: all 0.5s linear;
				}
				.smiley:hover .left-eyebrow {
					transform: rotate(100deg);
				}
				.smiley:hover .right-eyebrow {
					transform: rotate(80deg);
				}
			</style>
			<circle class="face" cx="128" cy="128" r="120" fill="gold" />
			<g class="eyes">
				<circle class="left-eye" cx="100" cy="104" r="12" />
				<circle class="right-eye" cx="156" cy="104" r="12" />
			</g>
			<g class="eyebrows">
				<rect
					class="left-eyebrow"
					x="97"
					y="66"
					width="6"
					height="32"
					rx="4"
					ry="4"
				/>
				<rect
					class="right-eyebrow"
					x="153"
					y="66"
					width="6"
					height="32"
					rx="4"
					ry="4"
				/>
			</g>
			<path
				class="mouth"
				d="M100,160 Q128,190 156, 160"
				fill="none"
				stroke="#000"
				stroke-width="6"
				stroke-linecap="round"
			/>
		</svg>
		<div class="tutorials">
			<a href="https://s.juejin.cn/ds/i6xaVJ8o/" target="_blank">
				<svg
					t="1696988571607"
					class="icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="4422"
					width="200"
					height="200"
				>
					<path
						d="M924.8 576.64v-115.2c12.8-13.44 13.44-26.88 12.8-34.56-3.2-30.08-36.48-42.24-47.36-46.72-79.36-30.08-226.56-89.6-307.84-122.88-49.28-24.32-65.28-19.84-113.28-0.64-12.8 5.12-224.64 83.84-306.56 117.76-44.8 18.56-51.2 46.08-51.2 61.44 0 25.6 17.92 48.64 50.56 62.08L259.84 537.6v257.28l8.32 8.32c3.84 3.84 91.52 92.16 252.16 92.16 150.4 0 236.16-88.96 240-92.8l7.68-8.32V540.16l36.48-15.36-1.28 52.48-29.44 49.28 88.96 84.48 98.56-85.76-36.48-48.64zM710.4 771.2c-22.4 18.56-88.96 67.2-190.08 67.2-111.36 0-179.84-48.64-202.88-67.2V561.28l144.64 58.88h0.64c46.08 17.28 81.28 16 125.44-3.2l122.24-51.84v206.08z m154.24-138.24l-17.92-16.64 13.44-22.4 2.56-102.4c4.48-14.08-0.64-25.6-8.32-32-7.68-7.04-21.76-11.52-36.48-2.56L565.12 563.84c-30.08 13.44-49.92 14.08-81.92 2.56l-298.88-121.6c-7.68-3.2-12.16-6.4-14.08-8.96 1.92-1.92 6.4-5.12 14.72-8.96 81.92-33.92 302.72-116.48 305.28-117.12h0.64c38.4-15.36 38.4-15.36 67.2-0.64l1.92 0.64c80.64 32.64 226.56 92.16 307.2 122.88v163.2l16 21.12-18.56 16z"
						p-id="4423"
					></path>
				</svg>
			</a>
		</div>
	</body>
	<style>
		@layer reset, base;

		@layer reset {
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
		}

		@layer base {
			body {
				width: 100vw;
				min-height: 100vh;
				font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
				background: hsl(0 0% 2%);
				color-scheme: dark only;
				color: #fff;
				display: grid;
				place-content: center;
				padding: 1rem;
				&::before {
					--line: hsl(0 0% 95% / 0.15);
					--size: 60px;
					content: "";
					height: 100vh;
					width: 100vw;
					position: fixed;
					background: linear-gradient(
								90deg,
								var(--line) 1px,
								transparent 1px var(--size)
							)
							50% 50% / var(--size) var(--size),
						linear-gradient(
								var(--line) 1px,
								transparent 1px var(--size)
							)
							50% 50% / var(--size) var(--size);
					mask: linear-gradient(-15deg, transparent 30%, white);
					top: 0;
					transform-style: flat;
					pointer-events: none;
					z-index: -1;
				}
			}

			.tutorials {
				position: fixed;
				bottom: 1rem;
				right: 1rem;
				z-index: 9999;
				width: 64px;
				aspect-ratio: 1;
				border-radius: 50%;
				background: #3f517e;
				padding: 0.5rem;
				display: grid;
				place-content: center;
				transition: all 0.28s linear;

				&:hover {
					background: #4161b2;
				}

				& svg {
					display: block;
					width: 100%;
					height: 100%;
					filter: invert(1);
				}
			}
			@media (prefers-reduced-motion: reduce) {
				*,
				::before,
				::after {
					animation-delay: -1ms !important;
					animation-duration: 1ms !important;
					animation-iteration-count: 1 !important;
					background-attachment: initial !important;
					scroll-behavior: auto !important;
					transition-duration: 0s !important;
					transition-delay: 0s !important;
				}
			}
		}
	</style>
</html>
